<template>
  <!--    <el-button v-bind="$attrs" v-on="$listeners">-->
  <!--      <slot />-->
  <!--    </el-button>-->
  <button
    class="el-button"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
    @click="handleClick"
  >
    <i
      v-if="loading"
      class="el-icon-loading"
    />
    <i
      v-if="icon && !loading"
      :class="icon"
    />
    <span v-if="$slots.default"><slot /></span>
  </button>
</template>

<script>
import {Button} from 'element-ui';
/**
 * [按钮](https://element.eleme.cn/2.13/#/zh-CN/component/button)
 * @author maolin
 */
export default {
  name: 'EaButton',
  extends: Button,

  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },

  props: {
    /**
     * 类型 可选(primary / success / warning / danger / info / text)
     * @public
     */
    type: {
      type: String,
      default: 'default'
    },
    /**
     * 尺寸 可选(medium / small / mini)
     * @public
     */
    size: {
      type: String,
      default: ''
    },
    /**
     * 图标类名
     * @public
     */
    icon: {
      type: String,
      default: ''
    },
    /**
     * 原生 type 属性 可选(button / submit / reset)
     * @public
     */
    nativeType: {
      type: String,
      default: 'button'
    },
    /**
     * 是否加载中状态
     * @public
     */
    loading: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否禁用状态
     * @public
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否朴素按钮
     * @public
     */
    plain: {
      type: Boolean,
      default: false
    },
    /**
     * 是否默认聚焦
     * @public
     */
    autofocus: {
      type: Boolean,
      default: false
    },
    /**
     * 是否圆角按钮
     * @public
     */
    round: {
      type: Boolean,
      default: false
    },
    /**
     * 是否圆形按钮
     * @public
     */
    circle: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    _elFormItemSize () {
      return (this.elFormItem || {}).elFormItemSize;
    },
    buttonSize () {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    buttonDisabled () {
      return this.disabled || (this.elForm || {}).disabled;
    }
  },

  methods: {
    /**
     * 触发点击
     * @param {object} evt 按钮事件
     * @public
     */
    handleClick (evt) {
      this.$emit('click', evt);
    }
  }
};
</script>

<style scoped>

</style>
